<template>
    <view class="exchangecard">
        <view class="cardlist">
            <view class="listem" v-for="(item,index) in arr" :key="index">
                <view class="leftconet">
                    <text class="numbermod">{{item.dhpoin}}</text>
                    <text class="poind">点</text>
                </view>
                <view class="valwxge">
                    兑换价 {{item.num}} USDT
                </view>
                <view class="exchbtn" :id='item.num' @click="ljdui">
                    立即兑换
                </view>
            </view>
        </view>
        <wyb-popup ref="popup" type="center" height="390" width="600" radius="10">
            <view style="border-radius: 10px;">
                <view class="ncs"><text @click="guanb">x</text>支付</view>
                <view class="uicnm">
                    {{isTeloremil}}
                    <text>USDT</text>
                </view>
                <input class="csqb" v-model="cnayamz" type="text" placeholder="请输入支付密码" />
                <view class="subyzmbtn">
                    <text class="cnmde" @click="okBtnfn">确定</text>
                </view>
            </view>
        </wyb-popup>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
    export default {
        components: {
            wybPopup
        },
        data() {
            return {
                isTeloremil: '',
                cnayamz: '',
                arr: [{
                        num: 50,
                        dhpoin: ''
                    },
                    {
                        num: 100,
                        dhpoin: ''
                    },
                    {
                        num: 200,
                        dhpoin: ''
                    },
                    {
                        num: 500,
                        dhpoin: ''
                    },
                    {
                        num: 1000,
                        dhpoin: ''
                    }
                ]
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
            this.pointCbl()
        },
        onPullDownRefresh() {
            console.log('refresh');

            this.pointCbl();
        },
        methods: {
            guanb(){
                this.$refs.popup.hide();
            },
            //确定
            okBtnfn(){
                if(this.cnayamz==''){
                    return uni.showToast({
                            icon: "none",
                            title: '请输入支付密码',
                        });
                }
                uni.showLoading({
                    mask: true
                });
                request.postAssets('/assets/userWallet/buyPointCard', {
                    amount: Number(this.isTeloremil),
                    //note (string, optional): 备注 ,
                    transPwd:this.cnayamz,
                    userId: uinfo.userId
                }).then(res => {
                    console.log(res)
                    if (res.code == '200') {
                        this.$refs.popup.hide();
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: '兑换成功',
                        });
                    } else {
                        this.$refs.popup.hide();
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            //立即兑换
            ljdui(e) {
                
                request.postMember('/user/info/queryUserInfo', {
                    userId: uinfo.userId,
                }).then(res => {
                    //console.log(res)
                    if (res.code == '200') {
                        //是否设置支付密码  isSetPayPwd 0未设置   1已设置
                        if (res.data.isSetPayPwd == 0) {
                            uni.showToast({
                                icon: "none",
                                title: '请先设置支付密码',
                            });
                            setTimeout(function() {
                                uni.navigateTo({
                                    url: '/pages/editpaypad/editpaypad?ab=1',
                                });
                            }, 1000)
                
                        } else {
                            this.$refs.popup.show();
                            console.log(e.currentTarget)
                            this.isTeloremil=e.currentTarget.id;
                            console.log('已设置支付密码')
                        }
                    }
                })
                
                
                
                
            },
            //点卡比例计算
            pointCbl() {
                request.postAssets('/assets/userWallet/queryDataDictionary', {
                    key: 'point_card_ratio'
                }).then(res => {
                    if (res.code == '200') {
                        uni.stopPullDownRefresh();
                        this.arr.map(item => {
                            item.dhpoin = item.num * res.data.value
                        })
                    } else {
                        uni.stopPullDownRefresh();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            }
        }
    }
</script>

<style>
    .exchangecard {
        padding: 20px 0 50px 0;
        background-color: #F5F5F5;
    }

    .listem {
        width: 710rpx;
        height: 68px;
        margin: 0 auto 20px;
        background: #FFFFFF;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .leftconet {
        width: 222rpx;
    }

    .leftconet .numbermod {
        font-size: 26px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 36px;
        color: #333333;
    }

    .leftconet .poind {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 24px;
        color: #333333;
    }

    .valwxge {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
        color: #FE8325;
        width: 280rpx;
    }

    .exchbtn {
        width: 75px;
        height: 32px;
        background: #7F6AC3;
        border-radius: 17px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 32px;
        color: #FFFFFF;
        text-align: center;
    }
    
    .ncs {
        padding: 10px 0 10px 0;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        border-bottom: 1px solid #C4D5C3;
    }
    .ncs text{
        display: inline-block;
        width: 50rpx;
        margin: 0 200rpx 0 10px;
    }
    .uicnm {
        text-align: center;
        color: #000000;
        font-size: 30px;
    }
    .uicnm text{
        text-align: center;
        font-size: 14px;
    }
    
    .csqb {
        text-align: center;
        border-bottom: 1px solid #7F6AC3;
        width: 300rpx;
        height: 60rpx;
        margin: 20px auto 40rpx;
    }
    
    .subyzmbtn {
        text-align: center;
    }
    
    .subyzmbtn .nmzls {
        display: inline-block;
        background: #7F6AC3;
        padding: 10rpx 0px;
        width: 200rpx;
        color: #FFFFFF;
        font-size: 26rpx;
        border-radius: 10px;
    }
    
    .subyzmbtn .cnmde {
        display: inline-block;
        background: #7F6AC3;
        padding: 10rpx 0px;
        width: 200rpx;
        margin: 0 0 0 10px;
        color: #FFFFFF;
        font-size: 26rpx;
        border-radius: 18rpx;
    }
</style>
